<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="nav.css">
    <style>
        #root {
            width: 700px;
            margin: 0 auto;
            position: relative; /*如果子元素的绝对定位要基于父元素*/
            min-height: 780px;
        }

        #head {

        }

        #right {
            right: 0;
            width: 420px;
            background: red;

        }

        .mid { /*左边和右边的共同点*/
            position: absolute; /*绝对定位*/
            min-height: 500px;
            top: 130px;
        }

        #left {
            /*background:yellow;*/
            width: 280px;
            padding:20px;
        }
        #left li{
            width:240px;
            height:30px;
            border:1px solid #ccc;
        }
        #left li>a{
            line-height: 30px;
            text-decoration: none;
            color:#666;
            margin-left: 10px;
        }
         #left li:hover{
             background: red;
         }
        #left li:hover a{
            color:#aaa;
        }
        #foot {
            background: black;
            height: 150px;
            width: 700px;
            position: absolute;
            bottom: 0;
        }
        #logo {
            height: 100px;
            overflow: hidden;
        }
        .yincang{
            display:none;
        }
        #xuanyan {
            font-family: 华文隶书;
            color:#666;
            font-size:22px;
        }
    </style>
</head>
<body>
<div id="root">
    <div id="head">
        <div id="logo">
            <h1>虹猫学园</h1>
            <span id="xuanyan">明天你一定会感谢努力敲代码的你！</span>
        </div>
        <ul id="nav">
            <li>
                <div class="li-before">列表项</div>
                <div class="li-after">列表项</div>
            </li>
            <li>
                <div class="li-before">列表项</div>
                <div class="li-after">列表项</div>
            </li>
            <li>
                <div class="li-before">列表项</div>
                <div class="li-after">列表项</div>
            </li>
            <li>
                <div class="li-before">列表项</div>
                <div class="li-after">列表项</div>
            </li>
            <li>
                <div class="li-before">列表项</div>
                <div class="li-after">列表项</div>
            </li>
            <li>
                <div class="li-before">列表项</div>
                <div class="li-after">列表项</div>
            </li>
        </ul>


    </div>


    <div id="left" class="mid">
        <ul>
            <li><a href="javascript:show(0)">用户列表</a></li>
            <li><a href="javascript:show(1)">新增用户</a></li>
            <li><a href="javascript:show(2)">修改用户</a></li>
            <li><a href="javascript:show(3)">充值</a></li>
        </ul>
    </div>
    <div id="right" class="mid">
        <div class="child-content yincang"> 用户列表</div>
        <div class="child-content yincang">新增用户</div>
        <div class="child-content yincang">修改用户</div>
        <div class="child-content yincang">充值</div>
    </div>
    <div id="foot"></div>
</div>
<script>
    var rr=document.getElementById('right');

    function show(e){
        //debugger;
        //rr.children[e].style.display='block';
        for(var i=0;i<4;i++){
            if(e==i){
                rr.children[e].classList.remove('yincang');
            }else{
                rr.children[i].classList.add('yincang');
            }
        }
    }
</script>
</body>
</html>